<template>
  <el-select v-model="value1" placeholder="选择用户" ref="memberSelect" @change="handleMemberChange" clearable>
    <el-option v-for="it in options" :key="it.id" :value="it.id" :label="it.nickname">{{it.nickname}}</el-option>
  </el-select>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "MemberSelect",
  props: ['value'],
  computed: {
    ...mapGetters(['memberList']),
    value1: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit('input', v);
      }
    },
    options() {
      return this.memberList
    }
  },
  methods:{
    handleMemberChange (id) {
      if (id) {
        let member=this.memberList.find(item=>{
          return item.id==id
        })
        this.$emit('change', member.nickname);
      } else {
        this.$emit('change', null);
      }
    },
  },
  created() {
    this.$store.dispatch('mall/loadMemberList')
  }
}
</script>

<style scoped>

</style>
